@import "color";

header{

//  background-color: #41A0EA;
  background-color: white;

.nav-logo {
  height: 110px;
  display: flex;
  padding: 5px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: center;
  img {
    height: 90px;
  }

  a{
    &:hover {
      border: unset!important;
      text-decoration: unset;
    }
  }

  h2 {
  //  line-height: 90px;
   // padding-left: 20px;
    padding-left: 20px;
    color: $hoverColor;
    font-weight: bold;

   // font-style: italic;
  }
  h4{
    color: white;
  }
}

.navbar {
  background-color: $mainColor;
//  background: url("/DioscoreaEsculentaDatabase/assets/images/back.jpg");

 // border-radius: 5px;
  padding: 0px 20px;

  .navbar-collapse{
    max-width: 1400px;
    margin: 0 auto;
  .nav-item {
    width: 105px;

    &.active{
      background-color: white;
      & >a{
        color: $mainColor!important;
      }
    }

    .nav-link {
      color: white;
      text-align: center;
      font-size: 16px;
      font-weight: 600;


      &:hover {
        background-color:white;
        color: $mainColor;
      }
    }
  }

  .my-dropdown {
    position: relative;

    &:hover {
      ul {
        display: unset;
      }
    }


    ul {
      position: absolute;
      border: 1px solid #dddddd;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      list-style: none;
      background-color: white;
      top: 40px;
      padding-left: 0;
      box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
      display: none;
      z-index: 2;


      .my-right {
        position: relative;

        a{
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        &:hover{
          ul{
            display: block;
          }
        }

        ul {
          position: absolute;
          left: 100%;
          top: 0;
          display: none;
        }
      }


      .header-line {
        border-bottom: 1px solid #dddddd;
      }

      .sub-title {
        font-weight: bold;
        padding: 10px;
        padding-left: 15px;

        &:hover {
          background-color: unset;
          cursor: unset;
        }

      }

      li {
        width: 100%;
        cursor: pointer;

        &:hover {
          background-color: #dddddd;
        }

        a {
          width: 100%;
          padding: 8px 30px;
          display: block;
          height: 100%;
          color: #343a40;
          white-space: nowrap;

          &:hover {
            text-decoration: unset;
          }
        }

      }

    }
  }

  }

}
}
